<template>
	<view class="content">
		<view class="input-group">
			<view class="input-row border">
				<text class="title">手机号：</text>
				
				<m-input type="text" focus clearable v-model="phone1" placeholder="请输入手机号"></m-input>
			</view>
			<view class="input-row border">
				<text class="title">姓名：</text>
				<m-input type="text" focus clearable v-model="userName1" placeholder="请输入姓名"></m-input>
			</view>

		</view>
		
		
		<view class="btn-row">
			<button type="primary" class="primary" @tap="updata">修改资料</button>
		</view>
	</view>
</template>

<script>
	
	import mInput from '../../components/m-input.vue';
	
	export default {
		components: {
			mInput
		},
		data() {

			return {
				phone1:'',
				userName1:'',
				uid:uni.getStorageSync('setUserData').id
			}
		},
		//页面加载前给初始参数赋值，不能直接使用缓存参数
		onLoad() {
			this.phone1 = uni.getStorageSync('setUserData').phone;
			this.userName1 = uni.getStorageSync('setUserData').name;
		},
		methods: {
			updata() {
				/**
				 * 客户端对账号信息进行一些必要的校验。
				 * 实际开发中，根据业务需要进行处理，这里仅做示例。
				 */
				if (this.phone1.length < 11) {
					uni.showToast({
						icon: 'none',
						title: '手机号最短为 11个字符'
					});
					return;
				}
			
			
				uni.request({
					url: 'http://wd1900144.pro.wdcase.com/carApi/user.php',
					method: 'GET',
					data: {
						act:'mydate',
						phone:this.phone1,
						name:this.userName1,
						uid:this.uid
					},
					success: res => {	
						uni.setStorageSync('setUserData', {
							phone:this.phone1,
							name:this.userName1
						})
						console.log(res);
							//弹出模态框
							uni.showToast({
								title:res.data.msg
							});
						uni.reLaunch({
							url:'../my/my'
						})
					},
					fail: () => {},
					complete: () => {}
				});
				
				
			}
		}
	}
</script>

<style>
body{
	background-color: #efeff4;
}
  .input-row .title {
	  width:170upx;
  }
	.input-group {
		background-color: #ffffff;
		margin-top: 20px;
		position: relative;
	}
	
	.input-group::before {
		position: absolute;
		right: 0;
		top: 0;
		left: 0;
		height: 1px;
		content: '';
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: #c8c7cc;
	}
	
	.input-group::after {
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		height: 1px;
		content: '';
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: #c8c7cc;
	}
	
	.input-row {
		display: flex;
		flex-direction: row;
		position: relative;
		font-size: 18px;
		line-height: 40px;
	}
	
	.input-row .title {
		width: 72px;
		padding-left: 15px;
	}
	
	.input-row.border::after {
		position: absolute;
		right: 0;
		bottom: 0;
		left: 8px;
		height: 1px;
		content: '';
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: #c8c7cc;
	}
 .btn-row{
	 margin-top: 100px;
 }
</style>
